﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Chat.aspx.cs" Inherits="Chat" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SignalR 聊天室</title>
    <style>
        #userName {
            display: none;
            color: red;
        }
        .choose{
            background: green;
        }
        .container{
            width: 300px;
            height: 300px;
            border: 1px solid green;
        }
        .element{
            width: 100px;
            height: 100px;
            border: 1px solid green;
            opacity: 0.1;
        }
    </style>

</head>

<body>

    <div class="container">
        <div class="element"><input class="id" type="hidden" value="1" /></div>
        <div class="element"><input class="id" type="hidden" value="2" /></div>
        <div class="element"><input class="id" type="hidden" value="3" /></div>
    </div>
    <style>
        body{

        }
    </style>
</body>
<%-- 引用 jQuery 的參考--%>
<script src="Scripts/jquery-2.1.1.min.js"></script>
<%--引用 SignalR 的參考--%>
<script src="Scripts/jquery.signalR-2.1.1.min.js"></script>

<%--這邊滿重要的，這個參考是動態產生的，當我們build之後才會動態建立這個資料夾，且需引用在jQuery和signalR之後--%>
<script src="signalr/hubs"></script>

<script type="text/javascript">

    var colors = ['Lavender', 'LavenderBlush', 'LawnGreen', 'LemonChiffon', 'LightBlue', 'LightCoral', 'LightCyan', 'LightGoldenRodYellow', 'Ivory', 'Khaki', 'SpringGreen', 'Aquamarine', 'Beige', 'AliceBlue'];

    $(function () {

        //建立與Server端的Hub的物件，注意Hub的開頭字母一定要為小寫
        var ctr = $.connection.mainPageCtrHub;

        //將連線打開
        $.connection.hub.start().done(function () {
            //當連線完成後，呼叫Server端的hello方法，並傳送使用者姓名給Server
        });;

        //建立連線後，我們接著來定義client端的function來讓Server端的hub呼叫。
        ctr.client.flashElement = function (id) {
            var i = Math.floor(Math.random() * 14);
            var color = colors[i];
            $('.id').each(function () {
                if ($(this).val() == id) {
                    var e = $(this).parent('.element').css("background-color", color);
                    e.fadeTo(150, 0.5, function () { e.fadeTo(250, 0) });
                }
            })
        }

        $(".element").click(function () {
            //呼叫Server端的sendMessage方法，並傳送使用者姓名及訊息內容給Server
            ctr.server.flashElement($(this).children('input').val());
        });

    });
</script>

</html>
